<template>
	<view class="wrap">
		<u-form class="form">
			<u-form-item label="提醒类型" prop="remindType" label-width="180" :required="true" :disabled="isDisabled">
				<js-select v-model="model.remindType" 
					:items="remindTypeOptions" 
					itemLabel="name"
					itemValue="value" 
					:disabled="isDisabled"
					placeholder="请选择提醒类型">
				</js-select>
			</u-form-item>
		</u-form>
		<schedule-form v-if="isModelLoadedFlag && model.remindType === '1'" :mode-prop="mode" :initial-model="model">
			<template slot="formFooterBtns" slot-scope="{msgGrandson}"><!-- 这里slot属性值是孙子组件slot名-->
				<slot name="footerBtns" :msgChild="msgGrandson"></slot><!-- 这里slot属性值是当前子组件slot名-->
			</template>
		</schedule-form>
		<remind-form v-if="isModelLoadedFlag && model.remindType === '2'" :mode-prop="mode" :initial-model="model">
			<template slot="formFooterBtns" slot-scope="{msgGrandson}">
				<slot name="footerBtns" :msgChild="msgGrandson"></slot>
			</template>
		</remind-form>
		<todo-form v-if="isModelLoadedFlag && model.remindType === '3'" :mode-prop="mode" :initial-model="model">
			<template slot="formFooterBtns" slot-scope="{msgGrandson}">
				<slot name="footerBtns" :msgChild="msgGrandson"></slot>
			</template>
		</todo-form>
		<birthday-form v-if="isModelLoadedFlag && model.remindType === '4'" :mode-prop="mode" :initial-model="model">
			<template slot="formFooterBtns" slot-scope="{msgGrandson}">
				<slot name="footerBtns" :msgChild="msgGrandson"></slot>
			</template>
		</birthday-form>
		<anniversary-form v-if="isModelLoadedFlag && model.remindType === '5'" :mode-prop="mode" :initial-model="model">
			<template slot="formFooterBtns" slot-scope="{msgGrandson}">
				<slot name="footerBtns" :msgChild="msgGrandson"></slot>
			</template>
		</anniversary-form>
	</view>
</template>

<script>
	import ScheduleForm from '@/pages/wechat/wechatSchedule/comp/scheduleForm.vue';
	import RemindForm from '@/pages/wechat/wechatSchedule/comp/remindForm.vue';
	import TodoForm from '@/pages/wechat/wechatSchedule/comp/todoForm.vue';
	import BirthdayForm from '@/pages/wechat/wechatSchedule/comp/birthdayForm.vue';
	import AnniversaryForm from '@/pages/wechat/wechatSchedule/comp/anniversaryForm.vue';
	/**
	 * https://blog.csdn.net/sinat_36146776/article/details/124149931
	 */
	export default {
		name: 'FormContainer',
		components: {
			ScheduleForm,
			RemindForm,
			TodoForm,
			BirthdayForm,
			AnniversaryForm
		},
		props: {
			/**
			 * 主键ID
			 */
			id: {
				type: [String,Number],
				default: ''
			},
			/**
			 * 模式：add、edit、view
			 */
			modeProp: {
				type: String,
				default: ''
			},
		},
		data() {
			// 1.日程、2：提醒、3：待办、4：生日、5：纪念日
			return {
				mode: '',
				remindTypeOptions: [],
				isModelLoadedFlag: false,
				model: {
					remindType: '',
					summary: '',
					attendees: '',
					startTime: '',
					endTime: '',
					description: '',
					location: '',
					userList: [],
					// 是否提醒，默认0（否）
					isRemind: '0',
					remindBeforeEventSecs: '',
					//是否重复：默认0（否）
					isRepeat: '0',
					// 重复类型
					repeatType: '',
					repeatUntil: '',
					// 是否自定义重复，默认0（否）
					isCustomRepeat: '0',
					frequency: '',
					repeatInterval: '',
					repeatDayOfWeek: '',
					repeatDayOfMonth: '',
					attach: ''
				},
			}
		},
		computed: {
			isDisabled: function() {
				return (this.mode === 'view' || this.mode === 'edit') ? true : false;
			}
		},
		watch: {
			
		},
		async created() {
			//mode来源有2处：路由请求中的参数、父组件传递的mode
			this.mode = this.modeProp;
			if(this.$route.query.mode) {
				this.mode = this.$route.query.mode;
			}
			await this.initRemindTypeOptions();
			this.initData();
		},
		mounted() {

		},
		methods: {
			async initRemindTypeOptions() {
				let vm = this;
				await this.$u.api.dictBizData({
					code: 'wechat_remind_type'
				}).then(res => {
					let optionList = [];
					res.data.forEach((item) => {
						optionList.push({
							'name': item.dictValue,
							'value': item.dictKey
						});
					})
					this.remindTypeOptions = optionList;
				});
			},
			initData() {
				//id来源有2处：路由请求中的参数、父组件传递的ID
				let id = this.$route.query.id;
				if(!id && this.id) {
					id = this.id;
				}
				if (id) {
					this.$u.api.wechat.wechatSchedule.detail({
						id: id
					}).then(res => {
						Object.assign(this.model, res.data);
						//由于remindType的检验规则中type默认为string类型，则需将number类型转为string
						this.model.remindType = this.model.remindType + '';
						this.isModelLoadedFlag = true;
					});
				}else {
					this.isModelLoadedFlag = true;
					this.model.remindType = this.remindTypeOptions[0].value;
					this.initStartTime();
				}
			},
			initStartTime() {
				let currentDate = new Date();
				this.model.startTime = this.$u.timeFormat(currentDate,'yyyy-mm-dd hh:MM:ss');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
	}

	.uTagStyle {
		margin-right: 10rpx;
	}

	.scroll-Y {
		height: 200rpx;
	}

	/deep/ ::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: #ccc !important;
		-webkit-appearance: auto !important;
		display: block;
	}

	/deep/ ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px !important;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		background: #7b7979 !important;
	}

	/deep/ ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		background: #FFFFFF !important;
	}
	
	.fixed-button-container {
		display: flex; 
		flex-direction: row;
		justify-content: center;
		width: 100%;
		
		padding: 0 10rpx;
		button {
			width: 50%;
		}
		button + button {
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>